<template>

    <body>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="用户名">
                <el-input v-model="form.UserName" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.UserPass" type="password" show-password />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </body>

</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const Store = useCounterStore()
const router = useRouter()
// do not use same name with ref
const form = reactive({
    UserName: '',
    UserPass: '',

})

const login = () => {
    axios.get('https://localhost:44301/api/AdminStystem/LoginQuery', {
        params: {
            UserName: form.UserName,
            UserPass: form.UserPass
        }

    }).then(res => {
        if (res.data.result.statusCode == 200) {
            ElMessage.success('登录成功')
            router.push('/Mains')
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}


</script>
<style scoped>
@media (min-width: 1024px) {
    body {
        display: grid;
        place-items: center;
    }


}
</style>